<template>
    <v-list-group
        v-if="!isString && dom.children.length !== 0 && !firstChildIsString"
        color="purple"
    >
        <template v-slot:activator="{ props }">
            <v-list-item
                v-bind="props"
                prepend-icon="mdi-language-html5"
                :style="{
                    paddingInlineStart:
                        8 * (dom.attr.layer + 1) + 'px !important'
                }"
                @click="focusElemnet(dom.attr.id, dom.attr.name)"
            >
                <template #default>
                    {{ dom.attr.name }}
                    <v-btn
                        @click.stop="focusElemnet(dom.attr.id, dom.attr.name)"
                        style="position: absolute; right: 5em"
                        variant="text"
                        density="compact"
                        icon
                    >
                        <v-icon
                            :style="{
                                color:
                                    dom.attr.id === currentId ? 'red' : 'black'
                            }"
                            >mdi-cursor-default-outline</v-icon
                        >
                    </v-btn>
                    <v-btn
                        v-if="canShowDeleteIcon"
                        @click.stop="deleteDom(dom.attr.id)"
                        style="position: absolute; right: 3em"
                        variant="text"
                        density="compact"
                        icon
                    >
                        <v-icon>mdi-trash-can-outline</v-icon>
                    </v-btn>
                </template>
            </v-list-item>
        </template>
        <MenuItem
            v-for="(subchildren, index) in dom.children"
            :dom="subchildren"
            :canShowDeleteIcon="canShowDeleteIcon"
            :key="index"
            @delete-dom="deleteDom"
        ></MenuItem>
    </v-list-group>
    <v-list-item
        v-else-if="!isString"
        prepend-icon="mdi-language-html5"
        :style="{
            paddingInlineStart: 8 * (dom.attr.layer + 1) + 'px !important'
        }"
        @click="focusElemnet(dom.attr.id, dom.attr.name)"
    >
        <template #default>
            {{ dom.attr.name }}
            <v-btn
                @click.stop="focusElemnet(dom.attr.id, dom.attr.name)"
                style="position: absolute; right: 5em"
                variant="text"
                density="compact"
                icon
            >
                <v-icon
                    :style="{
                        color: dom.attr.id === currentId ? 'red' : 'black'
                    }"
                    >mdi-cursor-default-outline</v-icon
                >
            </v-btn>
            <v-btn
                v-if="canShowDeleteIcon"
                @click.stop="deleteDom(dom.attr.id)"
                style="position: absolute; right: 3em"
                variant="text"
                density="compact"
                icon
            >
                <v-icon>mdi-trash-can-outline</v-icon>
            </v-btn>
        </template>
    </v-list-item>
</template>
<script>
import { useDesignStore } from '@/stores/design'
export default {
    props: ['dom', 'canShowDeleteIcon'],
    data() {
        return {
            designStore: useDesignStore()
        }
    },
    computed: {
        currentId() {
            return this.designStore.currentDomPointer.attr.id
        },
        isString() {
            return typeof this.dom === 'string'
        },
        firstChildIsString() {
            if (this.dom.children.length === 0) {
                return false
            }
            return typeof this.dom.children[0] === 'string'
        }
    },
    methods: {
        deleteDom(id) {
            this.$emit('deleteDom', id)
        },
        focusElemnet(id, name) {
            document.getElementById(id).click()
            this.designStore.interActive.interActiveName = name
        }
    }
}
</script>
